<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/index-clear.css">
    <link rel="stylesheet" href="../css/index-top.css">
    <link rel="stylesheet" href="../css/cart-title.css">
    <link rel="stylesheet" href="../css/cart-detail.css">
    <link rel="stylesheet" href="../css/policy-footer.css">
    <title>购物车</title>

    <style>

    </style>
</head>

<body>
    <div class="top">
        <div class="top-center">
            <div class="top-center-left">
            </div>
            <div class="top-center-right">
                <a href="#" class="shopping-cart">我的订单</a>
                <a href="../index.html">返回首页</a>
            </div>
        </div>
    </div>

    <div class="title">
        <div class="title-center">
            <div class="title-logo"></div>
            <h1>我的购物车</h1>
            <h6>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</h6>
        </div>
    </div>


    <div class="cart-detail">
        <div class="cart-detail-title">
            <h4 class="select">
                <label>
                    <input type="checkbox" id="selectAll">
                    全选
                </label>
            </h4>
            <h4 class="cargo-name">商品名称</h4>
            <h4 class="price">单价</h4>
            <h4 class="num">数量</h4>
            <h4 class="total">小计</h4>
            <h4>操作</h4>
        </div>
        <div class="cart-detail-cargo">
            <h4 class="select">
                <label class="checkbox-item">
                    <input type="checkbox" class="item" data-id="1">
                </label>
            </h4>
            <h4 class="cargo-name">
                <div class="cargo-imag1"></div>
                <div>《活着》 余华 人民教育出版社</div>
            </h4>
            <h4 class="cargo-price">65.3元</h4>
            <h4 class="num">
                <div class="left">-</div>
                <div class=""><input type="text" value="1" class="input"></div>
                <div class="right">+</div>
            </h4>
            <h4 class="total">
                优惠后 60元
            </h4>
            <div class="deal">X</div>
        </div>
        <div class="cart-detail-cargo">
            <h4 class="select">
                <label class="checkbox-item">
                    <input type="checkbox" class="item" data-id="1">
                </label>
            </h4>
            <h4 class="cargo-name">
                <div class="cargo-imag2"></div>
                <div>《边城》 沈从文 铁路局出版社</div>
            </h4>
            <h4 class="cargo-price">89.5元</h4>
            <h4 class="num">
                <div class="left">-</div>
                <div class=""><input type="text" value="1" class="input"></div>
                <div class="right">+</div>
            </h4>
            <h4 class="total">
                优惠后 80元
            </h4>
            <div class="deal">X</div>
        </div>
    </div>

    <div class="pay">
        <div class="pay-left">
            <div class="pay-num">
                <span>已挑选</span>
                <span class="total-num">2</span>
                <span>件</span>
            </div>
            <div class="pay-price">
                <span>合计</span>
                <span class="total-price">140</span>
                <span>元</span>
            </div>
        </div>
        <div class="pay-right">
            <span class="jiesuan">结算</span>
        </div>


    </div>






    <script src="../js/shoppingCart-checkbox.js"></script>




    <footer>
        <div class="footer-container">
            <!-- 公司信息 -->
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>我们致力于提供高质量的产品和服务，满足客户的需求。</p>
                <div class="social-links">
                    <a href="#" title="微博"><span class="icon icon-weibo"></span></a>
                    <a href="#" title="微信"><span class="icon icon-wechat"></span></a>
                    <a href="#" title="Twitter"><span class="icon icon-twitter"></span></a>
                    <a href="#" title="LinkedIn"><span class="icon icon-linkedin"></span></a>
                </div>
            </div>

            <!-- 快速链接 -->
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>

            <!-- 联系方式 -->
            <div class="footer-section">
                <h3>联系方式</h3>
                <ul>
                    <li><span class="icon icon-map-marker"></span>美国白宫大厦A座1001室</li>
                    <li><span class="icon icon-phone"></span>400-123-4567</li>
                    <li><span class="icon icon-envelope"></span>特朗普@关税double.com</li>
                </ul>
            </div>

            <!-- 法律信息 -->
            <div class="footer-section">
                <h3>法律信息</h3>
                <ul>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">服务条款</a></li>
                    <li><a href="#">Cookie政策</a></li>
                    <li><a href="#">法律声明</a></li>
                </ul>
            </div>
        </div>

        <div class="copyright">
            <p>&copy; 2025 美国退堂鼓信息技术有限公司. 保留所有权利.</p>
        </div>
    </footer>
</body>

</html>